<template>
  <div>
    <el-row>
      <el-button circle @click="loginOAuth('baidu')" v-show="!authObject.alreadyToken">
        <div><img src="../assets/baidu.jpg" class="icon-oauth" :title="titles.baiduTips"/></div>
      </el-button>
      <img :src="authObject.headImageBasic" :title="authObject.loggedName" v-show="authObject.alreadyToken"/>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: 'IndexComponent',
    data() {
      return {
        titles: {
          baiduTips: '使用百度账号登录'
        },
        callStatus: '0000',
        serviceStatus: '000000',
        authObject : {
          headImageBasic: 'http://tb.himg.baidu.com/sys/portraitn/item/',
          alreadyToken: false,
          loggedName: ''
        }
      }
    },
    methods: {
      loginOAuth(sys) {
        let extract = {
          display: 'page',
          force_login: '1'
        };

        this.$http.post("proxy/unionAuth/authorizationCode",
          this.$queryParam.stringify({
            'authorizeType': sys,
            'extractParams': JSON.stringify(extract)
          })).then(response => {
          let data = response.data;
          if (data.requestStatus == this.callStatus && data.serviceResult.serviceStatus == this.serviceStatus) {
            window.location.href = data.serviceResult.responses.redirectUrl;
          } else {
            this.$notify({
              title: '警告',
              message: h('i', {style: 'color : teal'}, data.requestMessage + '/' + data.serviceResult.serviceMessage)
            });
          }
        });
      },
      parseAndGetCode(url, key) {
        let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        let matchResult = url.substr(1).match(reg);
        if (matchResult != null) {
          return decodeURIComponent(matchResult[2]);
        } else {
          return null;
        }
      },
      notifyError (info) {
        this.$notify({
          title: '警告',
          message: h('i', {style: 'color : teal'}, info.requestMessage + '/' + info.serviceResult.serviceMessage)
        });
      },
      judgeSuccess (message){
        return (message.requestStatus == this.callStatus && message.serviceResult.serviceStatus == this.serviceStatus);
      }
    },
    created() {
      let windowUrl = window.location.search;
      let code = this.parseAndGetCode(windowUrl, 'code');
      let uuid = this.parseAndGetCode(windowUrl, 'state');
      let params = {
        code: code,
        redirect_uri: 'http://burningyears.free.idcfengye.com'
      };
      if (code != null && uuid != null) {
        this.$http.post('proxy/unionAuth/accessTokenByCode', this.$queryParam.stringify({
          'requestOs': 'baidu',
          'uuid': uuid,
          'params': JSON.stringify(params)
        })).then(data => {
          let response = data.data;
          if (this.judgeSuccess(response)) {
            let token = response.serviceResult.responses.access_token;
            this.$http.post('proxy/unionAuth/loggedUserInfo',this.$queryParam.stringify({'accessToken':token,'requestOs':'baidu'})).then(data =>{
              let userInfo = data.data;
              if(this.judgeSuccess(userInfo)){
                this.authObject.headImageBasic += userInfo.serviceResult.responses.portrait;
                this.authObject.alreadyToken = true;
                this.authObject.loggedName = userInfo.serviceResult.responses.uname;
                this.$forceUpdate();
              }else {
                this.notifyError(userInfo)
              }
            });
            console.info("使用token获取头像")

          } else {
            this.notifyError(response)
          }
        });
      }

    }
  }
</script>
<style scoped>
  .icon-oauth {
    width: 23px;
    height: 24px;

  }
</style>
